<template>
    <div class="my-ap">
       <CounterView :counter="counter" />
       <CounterController @onIncrement="changeNum($event)" />
    </div>
</template>
<script>
    import {ref} from 'vue';
    import CounterController from '@/components/CounterController.vue'
    import CounterView from '@/components/CounterView.vue'
export default {
    components:{
        CounterController,
        CounterView
    },
    setup(){
        const counter=ref(1000);
        const changeNum=(num)=>{
            counter.value+=num
        }
        return {counter,changeNum}
    }
};
</script>
<style scoped>
    .my-app{
        color:blue;
    }
</style>
